<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页图片</title>
    <style type="text/css">
        body{
            margin:0;
        }
        #top{
            margin:0;
            height: 36px;
            background-color: #379be9;
        }
        #top .left{
            padding: 0 0 0 10px;
            margin: 0;
            float: left;
        }
        #top .left li{
            float: left;
            margin: 0 0 0 10px;
            padding: 0;
            height: 36px;
            list-style-type: none;
        }
        #top .left a{
            color:white;
            text-decoration: none;
            padding:10px 8px ;
            vertical-align: middle;
        }
        #top .left a:hover{
            color: black;
            background-color: aquamarine;
        }
        #top .right{
            margin:0;
            float: right;
        }
        #head{
            margin: 0;
            height:50px;
            width: 100%;
        }
        #head .left{
            margin: 0;
            width: 200px;
            height: 50px;
            float: left;
        }
        #head .middle{
            margin: 0;
            width: 700px;
            height: 50px;
            float: left;
            background-color:white;
        }
        #head .middle li{
            float: left;
            margin: 0 0 0 10px;
            padding: 0;
            height: 50px;
            list-style-type: none;
        }
        #head .middle a{
            color:black;
            text-decoration: none;
            vertical-align: middle;
        }
        #head .middle a:visited{
            color: blue;
        }
        #head .right{
            margin: 0;
            padding:0;
            height:50px;
            width: 360px;
            float:right;
            background-color: white;
        }
        #content{
            margin:0;
            height:1360px;
            width: 100%;
        }
        #content .left {
            margin: 0 0 0 10px;
            width: 300px;
            height: 800px;
            float: left;
            background-color:white;
        }
        #content .left ul{
            float: left;
            margin: 0;
            padding: 0;
            line-height: 30px;
            list-style-type: none;
        }
        #content .left li{
            padding: 10px 0;
            font: 14px/1.25 Microsoft Yahei,Helvetica,sans-serif;
        }
        #content .left li:hover{
            background-color: antiquewhite;
        }
        #content .left a{
            text-decoration: none;
            color: black;
        }
        #content .left a:hover{
            color: #379be9;
            text-decoration: underline;
        }
        #content .middle{
            margin: 0 0 0 20px;
            width: 600px;
            height: 800px;
            float: left;
            background-color:white;
        }
        h2{
            font-size: 26px;
            margin-bottom: 15px;
        }

        #content .right{
            margin: 0;
            padding: 0;
            height: inherit;
            width: 300px;
            float: right;
        }
        #content .right ul{
            float: left;
            margin: 0;
            padding:0;

            list-style-type: none;
        }
        #content .right li{
            padding: 20px 0;
            line-height: 100px;
            font: 14px  Microsoft Yahei,Helvetica,sans-serif;
        }
        #content .right a{
            color: black;
            text-decoration: none;
        }
        #content .right a:hover{
            color: #379be9;
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div id="top">
    <ul class="left">
    <li><a href="#">首页</a> </li>
    <li><a href="#">新闻</a> </li>
    <li><a href="#">体育</a> </li>
    <li><a href="#">娱乐</a> </li>
    <li><a href="#">视频</a> </li>
    <li><a href="#">财经</a> </li>
    <li><a href="#">证券</a> </li>
    <li><a href="#">汽车</a> </li>
    <li><a href="#">房产</a> </li>
    <li><a href="#">科技</a> </li>
    <li><a href="#">数码</a> </li>
    <li><a href="#">游戏</a> </li>
    <li><a href="#">教育</a> </li>
    <li><a href="#">文化</a> </li>
    <li><a href="#">更多</a> </li>
</ul>
    <p class="right">
        <img src="./img/picture.png">
    </p>

</div>

<div id="head">
    <div class="left">
        <img src="./img/logo.png">
    </div>
    <div class="middle">
        <ul>
            <li><a href="#">国内</a> </li>
            <li><a href="#">国际</a> </li>
            <li><a href="#">社会</a> </li>
            <li><a href="#">军事</a> </li>
            <li><a href="#">评论</a> </li>
            <li><a href="#">历史</a> </li>
            <li><a href="#">图片</a> </li>
            <li><a href="#">天气</a> </li>
        </ul>
    </div>
    <div class="right">
        <div style="float: right; padding-top: 10px">
           <input type="text" value="两会">
           <input type="button" value="搜索">
        </div>
    </div>
</div>
<div id="content">
<div class="left">
<p style="font-size: medium ; color: #379be9"><b>热门新闻</b></p>
    <ul>
        <li><a href="#">独家披露：习近平总书记2013-2017两会时间全纪实</a> </li>
        <li><a href="#">习近平两会时间：30次下团组听取230多名代表委员发言</a> </li>
        <li><a href="#">张德江主持12届全国人大五次会议闭幕会并讲话</a> </li>
        <li><a href="#">金句纵览2013-2017习近平两会时间</a> </li>
        <li><a href="#">李克强：不希望也不愿意看到“选边站对的事情发生”</a> </li>
        <li><a href="#">李克强：继续提供优惠，让台商台胞和大陆共享发展机遇</a> </li>
        <li><a href="#">李克强：给优质产品“点赞”，把不良产品“拉黑”</a> </li>
    </ul>
</div>
<div class="middle">
<h2>独家披露:习近平总书记2013-2017两会时间全纪实</h2>
    <p style="font-size: smaller"><b>时政新闻&nbsp;&nbsp;新华社</b>&nbsp;&nbsp;2017-03-16 09-50 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button"  style="height: 25px; width: 70px" value="485评论">&nbsp;&nbsp;<input type="button"  style="height: 25px;width: 70px" value="《分享">
    </p>
    <p>
        <img style="width: 600px" src="./img/xjp.png">
    </p>
    <p style=" font-size: 16px;
              line-height: 28px;
              list-style-type:none;">
        <p>
            ◆“当年库尔班大叔来北京见到了毛主席。我今天见到了习主席。”现场爆发出热烈的掌声。买买提依布热依木·买买提明说：“党的政策亚克西！”习近平总书记也回应：亚克西！
        </p>
        <p>
            ◆ 细心的人们总结出一些规律。全国两会期间，习近平总书记参加代表团审议后，总会选择其中一些省份再做实地考察调研。
        </p>
        <p>
            ◆今年参加四川代表团审议时，习近平总书记说，曾在电视上看到有关凉山州“悬崖村”的报道，特别是看着村民们的出行状态，感到很揪心。了解到当地建了新的铁梯，心里稍稍松了一些。
        </p>
        <p>
            ◆ 从一次会议到五次会议，习近平总书记每年都要到他所在的上海代表团参加审议，改革开放、创新驱动是必谈的话题。
        </p>
        <p>
            ◆习近平总书记坚定地说：“真正把忠诚党和人民事业，做人堂堂正正，干事干干净净的干部选拔出来，让不作为的人坐不稳，让忽悠的人没前途，让跑官要官的人没市场，让买官卖官的人受严惩，形成风清气正的良好政治生态。”
        </p>
        <p>
            ◆“一定要调结构啊。”总书记语重心长地说，结构调整一定不要搞相濡以沫，让“僵尸企业”苟延残喘。一定要腾笼换鸟，最后达到凤凰涅槃、浴火重生的境界。长痛不如短痛。
        </p>
        <p>
            ◆ “强军的责任历史地落在了我们肩上，要挑起这副担子，必须敢于担当，这既是党和人民的期望，也是当代革命军人应有的政治品格。”习近平总书记的嘱托，激发出全军将士空前高昂的斗志。
        </p>
    </p>
</div>
<div class="right">
<p><img src="./img/xinwen.png"></p>
    <div style="height:800px;  float: left; width: 120px">
           <img src="./img/hecheng.png">
    </div>
    <div style="height: 800px; float: left; width: 180px">
      <ul>
            <li><a href="#">学习贯彻习近平总书记七一重要讲话</a></li>
            <li><a href="#"> 习近平致信祝贺 中国地质博物馆建馆100周年</a></li>
            <li><a href="#">习近平出席东西部扶贫协作座谈会</a></li>
            <li><a href="#">习近平：把确保人民群众生命安全放在首位</a></li>
      </ul>
    </div>
</div>
</div>
</body>
</html>